<template>
  <view>
    <view class="bg-white mt-2">
      <view class="flex justify-between align-center  mx-3 py-3 border-bottom">
        <view class="font">头像</view>
        <image style="width: 80rpx;height: 80rpx;" class="rounded-circle"
               src="https://cx-img.zmn.cn/Image/user/4.jpg"></image>
      </view>
      <view class="flex justify-between align-center  mx-3 py-3 border-bottom">
        <view class="font">昵称</view>
        <input class="text-right text-muted" placeholder="请输入昵称" v-model="userInfo.nickname"/>
      </view>
      <view @click="show = true" class="flex justify-between align-center  mx-3 py-3 border-bottom">
        <view class="font">性别</view>
        <u-icon :label="userInfo.sex" label-pos="left" name="arrow-right"></u-icon>
      </view>
      <view @click="showData = true" class="flex justify-between align-center  mx-3 py-3">
        <view class="font">生日</view>
        <u-icon :label="userInfo.birthday" label-pos="left" name="arrow-right"></u-icon>
      </view>
    </view>
<!--    确定按钮-->
    <u-button class="mt-3" type="primary" shape="circle" text="保存" @click="saveInfo"></u-button>
    <!--    性别选择器-->
    <u-picker :close-on-click-overlay="true" @close="show = false" @confirm="sexPickerEnter" @cancel="show = false"
              :show="show" :columns="columns"></u-picker>
    <!--    日期选择器-->
    <u-datetime-picker :max-date="Number(new Date())" :min-date="-3021696343000" close-on-click-overlay @close="showData = false" @cancel="showData = false" @confirm="dataPickerEnter" :show="showData" v-model="getData" mode="date"></u-datetime-picker>
  </view>
</template>

<script>
export default {
  data() {
    return {
      show: false,
      showData: false,
      userInfo: {
        nickname: '111111',
        sex: '女',
        birthday: '2018-10-1'
      },
      columns: [
        ['男', '女']
      ],
      nowDay: ''
    };
  },
  computed: {
    getData: {
      get(){
        let { birthday } = this.userInfo
        let array = birthday.split('-')
        let year = array[0]
        let month = array[1]
        let day = array[2]
        let date = new Date(year, month - 1, day); // 月份从0开始，所以需要减去1
        return date.getTime();
      },
      set(value){
        this.nowDay = value
      }

    }
  },
  methods: {
    sexPickerEnter(e) {
      this.userInfo.sex = e.value[0]
      this.show = false
    },
    dataPickerEnter(e) {
      let { value } = e
      const date = new Date(value);

      const year = date.getFullYear();
      const month = date.getMonth() + 1; // 月份是从0开始计数的，需要加1
      const day = date.getDate();
      this.userInfo.birthday = `${year}-${month}-${day}`
      this.showData = false
    },
    saveInfo(){
      let { userInfo } = this
      if (!userInfo.nickname) {
        uni.showToast({
          title: '请填写昵称',
          icon: "none"
        })
      }
    }
  },
}
</script>

<style lang="scss">
page {
  background: #f3f3f5;
}
</style>
